<template>
	<view class="container">
		<navBar :title="t('footprint.title')"></navBar>
		<view class="search-bar">
			<searchBar @clickBtn="gotoSearch"></searchBar>
		</view>
		<view class="date-header">07 Jan 2025</view>
		<view class="product-list">
			<view class="product-card" v-for="(product, index) in products" :key="index">
				<image class="product-image" src="../../static/1.jpg" mode="aspectFill" />
				<view class="product-info">
					<view class="product-title">{{ product.title }}</view>
					<view class="sales-info">
						<tn-icon name="fire" size="16" color="#ff4d4f"></tn-icon>
						<text>{{ product.sales }} Sold/Month</text>
					</view>
					<view class="commission-tag">
						{{ t('index.HighCommissions') }} {{ product.commission }}
					</view>
					<view class="price-row">
						<text class="price">¥{{ product.price }}</text>
						<view class="earn-btn">
							<text class="earn-btn-left">{{ t('index.Earn') }}</text>
							<text class="earn-amount">¥{{ product.earnAmount }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import navBar from "../../components/navBar/index.vue"
	import searchBar from "../../components/searchBar/index.vue"
	import {
		useI18n
	} from 'vue-i18n'

	const {
		t
	} = useI18n()

	const searchText = ref('');

	const products = ref([{
			image: '/placeholder.svg?height=100&width=100',
			title: 'ชุดเครื่องเขียนลายการ์ตูน แพ็ค 523w รุ่น (ดินสอ ยางลบ ไม้บรรทัด ก...',
			sales: '976',
			commission: '9%',
			price: '89.92',
			earnAmount: '100.22'
		},
		{
			image: '/placeholder.svg?height=100&width=100',
			title: 'ชุดเครื่องเขียนลายการ์ตูน แพ็ค 523w รุ่น (ดินสอ ยางลบ ไม้บรรทัด ก...',
			sales: '976',
			commission: '9%',
			price: '89.92',
			earnAmount: '100.22'
		},
		{
			image: '/placeholder.svg?height=100&width=100',
			title: 'ชุดเครื่องเขียนลายการ์ตูน แพ็ค 523w รุ่น (ดินสอ ยางลบ ไม้บรรทัด ก...',
			sales: '976',
			commission: '9%',
			price: '89.92',
			earnAmount: '100.22'
		},
		{
			image: '/placeholder.svg?height=100&width=100',
			title: 'ชุดเครื่องเขียนลายการ์ตูน แพ็ค 523w รุ่น (ดินสอ ยางลบ ไม้บรรทัด ก...',
			sales: '976',
			commission: '9%',
			price: '89.92',
			earnAmount: '100.22'
		}
	]);

	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background: url("/static/my/bg.png") no-repeat center center / cover;
		padding-bottom: 40rpx;
	}

	.header {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background: transparent;

		.back-btn {
			padding: 10rpx;
		}

		.title {
			flex: 1;
			text-align: center;
			font-size: 32rpx;
			font-weight: 500;
			margin-right: 44rpx; // Compensate for back button
		}
	}

	.search-bar {
		width: 90%;
		margin: 60rpx auto;

		.search-input {
			flex: 1;
			display: flex;
			align-items: center;
			background: #fff;
			border-radius: 100rpx;
			padding: 0 30rpx;
			border: 2rpx solid #000;

			input {
				flex: 1;
				height: 72rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
			}
		}

		.search-btn {
			background: #000;
			color: #fff;
			border-radius: 100rpx;
			padding: 0 40rpx;
			font-size: 28rpx;
			height: 76rpx;
			line-height: 76rpx;
		}
	}

	.date-header {
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		color: #666;
		font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 38rpx;
	}

	.product-list {
		padding: 0 30rpx;
	}

	.product-card {
		display: flex;
		background: #fff;
		margin-bottom: 20rpx;
		width: 686rpx;
		height: 224rpx;
		background: #FFFFFF;
		border-radius: 12rpx 12rpx 12rpx 12rpx;

		.product-image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
			margin-right: 12rpx;
			margin: 12rpx 22rpx 12rpx;
		}

		.product-info {
			flex: 1;
			display: flex;
			flex-direction: column;

			.product-title {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				width: 442rpx;
				height: 64rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				line-height: 32rpx;
				margin: 12rpx 0 8rpx;
			}

			.sales-info {
				display: flex;
				align-items: center;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-bottom: 12rpx;
			}

			.commission-tag {
				display: inline-block;
				width: 244rpx;
				height: 32rpx;
				border-radius: 4rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #FD2D55;
				background-color: #ffd5dd;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				text-align: center;
				margin-bottom: 8rpx;
			}

			.price-row {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: auto;
				margin-bottom: 12rpx;
				margin-right: 20rpx;

				.price {
					width: 98rpx;
					height: 32rpx;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
					line-height: 32rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.earn-btn {
					color: #fff;
					border-radius: 100rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					gap: 10rpx;
					background: #FFD5DD;
					border-radius: 8rpx 8rpx 8rpx 8rpx;

					.earn-btn-left {
						background: #ff4d4f;
						display: block;
						height: 100%;
						width: 86rpx;
						height: 44rpx;
						background: #FD2D55;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 44rpx;
						text-align: center;
					}

					.earn-amount {
						font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #FD2D55;
						line-height: 32rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>